<template>
  <video ref="videoRef" preload="auto" data-setup=''></video>
  <div ref="videoContainer" class="video-container">
<!--    <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" data-setup=''>-->
<!--      &lt;!&ndash; 可以在这里插入source标签以指定你的视频源 &ndash;&gt;-->
<!--      <source src="http://172.16.76.185:5051/temp/temp.mp4">-->
<!--    </video>-->

<!--    <el-button @click="go">测试</el-button>-->
<!--    <el-input v-model="this.message"></el-input>-->
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Hls from 'hls.js';

const videoRef = ref(null);

onMounted(() => {
  const video = videoRef.value;
  const MyLiveUrl = '/temp/temp.m3u8';
  if (Hls.isSupported()) {
    const hls = new Hls();
    // 请将此处替换为实际有效的 HLS 视频流地址
    const hlsUrl = MyLiveUrl;
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });
    hls.on(Hls.Events.ERROR, (event, data) => {
      console.error('HLS 播放错误:', data);
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // 某些浏览器原生支持 HLS
    video.src = MyLiveUrl;
    video.addEventListener('loadedmetadata', () => {
      video.play();
    });
  }
});
</script>

<!--<script>-->
<!--import videojs from 'video.js';-->
<!--import 'video.js/dist/video-js.css';-->
<!--import request from "@/util/request";-->


<!--export default {-->
<!--  name: 'VideoPlayer',-->
<!--  data() {-->
<!--    return {-->
<!--      player: null,-->
<!--      url: "http://172.16.76.2:45453/123.jpg",-->
<!--      message: ""-->
<!--    };-->
<!--  },-->
<!--  mounted() {-->
<!--    this.player = videojs(this.$refs.videoPlayer, {-->
<!--      autoplay: false,-->
<!--      controls: true,-->
<!--    });-->
<!--  },-->
<!--  beforeUnmount() {-->
<!--    if (this.player) {-->
<!--      this.player.dispose();-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    go(){-->
<!-- //      request.post("http://172.16.76.2:45451/" , this.url).then(res=>{-->
<!-- // console.log(res)-->
<!-- //      })-->

<!--    }-->
<!--  }-->

<!--}-->
<!--</script>-->

<style scoped>
.video-container {
  width: 100%;
  max-width: 640px;
}
</style>

